<template>
	<scroll-view scroll-y="true" class="page n-s-b" v-if="token">
		<view class="avatar-wrap fillx frsc" @click="openPage('/pages/mine/my-info/my-info')">
			<view class="avatar frcc">
				<image class="avatar-img" src="../../../static/logo_abf.png" mode=""></image>
			</view>
			<view class="avatar-other autoxy frss fw">
				<view class="name fillx">
					昵称: {{data.nickname}}
				</view>
				<view class="level fillx">
					省级经销商
				</view>
			</view>
			<view class="avatar-arrow iconfont icon-arrow-right"></view>
		</view>
		<view class="order fillx">
			<view class="order-title fillx t-bb-u title-u bsp10">
				全部账单
				<text class="order-title-skip" @click="openPage('/pages/order/orderlist/orderlist')">查看全部订单 ></text>
			</view>
			<view class="order-app fillx frsc t-bb-u">
				<view class="order-app-item fccc" v-for="item in order_appList" :key="item.name" @click="toOrderList(item.name)">
					<image class="order-app-item-img" :src="item.picture" mode="widthFix"></image>
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
		<view class="property t-bb-u fillx">
			<view class="property-title fillx t-bb-u title-u bsp10">
				我的资产
			</view>
			<view class="property-content fillx bsp10 frcc">
				<view class="property-content-balance ha fccc" @click="openPage('/pages/wallet/wallet-home/wallet-home')">
					<text class="mr">0</text>
					<text>余额</text>
				</view>
				<view class="property-content-withdraw ha frcc">
					<text class="property-content-withdraw-text" @click="openPage('/pages/wallet/withdraw/withdraw')">立即提现</text>
				</view>
			</view>
		</view>
		<view class="app fillx t-bb-u">
			<view class="app-title fillx bsp10 t-bb-u title-u">
				我的应用
			</view>
			<view class="app-content fillx frsc fw">
				<view class="app-item-wrap fcsc" v-for="item in appList" :key="item.name" @click="openPage(item.page)">
					<image class="app-img" :src="item.picture" mode="scaleToFill"></image>
					<text class="app-name">{{item.name}}</text>
				</view>
			</view>
		</view>
		<view class="other-division fillx">
			<view class="other-division-item fillx bsp10 t-bb-u" v-for="item in divisionList" :key="item.name" @click="openPage(item.page)">
				{{item.name}}
				<!-- <image class="ar-icon" src="../../../static/arrow.svg" mode=""></image> -->
				<view class="iconfont icon-arrow-right m_arrow frcc"></view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				data:{},
				order_appList: [{
						name: '待发货',
						picture:'../../../static/member_order_02.png'
					},
					{
						name: '待收货',
						picture:'../../../static/member_order_03.png'
					},
					{
						name: '已取消',
						picture:'../../../static/member_order_04.png'
					}
				],
				appList: [{
						name: '实名认证',
						page: '/pages/certification/certification/certification',
						picture:'../../../static/mine_02.png'
					},
					{
						name: '余额互转',
						page: '/pages/mine/transfer-id/transfer-id',
						picture:'../../../static/mine_01.png'
					},
					{
						name: '我的预期股份',
						page: '/pages/mine/shares/shares',
						picture:'../../../static/mine_03.png'
					},
					/* {name:'查询真伪'}, */
					{
						name: '授权证书',
						page: '/pages/mine/web-view/web-view',
						picture:'../../../static/mine_04.png'
					},
					/* {name:'我的共享店后台'}, */
					{
						name: '店铺申请',
						page: '/pages/store/store-apply/store-apply',
						picture:'../../../static/mine_05.png'
					},
					{
						name: '古宝下载',
						page: '/pages/web-view/web-view?url=https%3A%2F%2Fwww.pgyer.com%2Fhshv',
						picture:'../../../static/mine_06.png'
					},
				],
				divisionList: [
					/* {name:'爱八方课堂'}, */
					{
						name: '官方网站'
					},
					{
						name: '官方微信'
					},
					{
						name: '联系客服'
					},
					{
						name: '设置',
						page: '/pages/mine/setting/setting'
					},
				]
			}
		},
		methods: {
			...mapMutations(['getNetworkType', 'vuexRequest', 'setCode', 'setChatMsgNum']),
			openPage(page) {
				uni.navigateTo({
					url: page
				})
			},
			getMemberInfo() {
				this.vuexRequest({
					url: '/api/addons/execute?route=member/detail&addon=o-s-mall-dist&access-token=' + this.token,
					method: 'GET',
					data: {},
					success: (res)  => {
						this.$set(this.data,'id',res.data.data.id)
						this.$set(this.data,'username',res.data.data.username)
						this.$set(this.data,'nickname',res.data.data.nickname)
					},
					fail: (err)  => {
						//console.log(err)
					},
				})
			},
			toOrderList(choose){
				uni.navigateTo({
					url:'/pages/order/orderlist/orderlist?choose='+ choose
				})
			}
		},
		computed: {
			...mapState(['token', 'SystemInfo', 'chatMsgNum'])
		},
		onShow() {
			//因为无法完全监听tabbar点击事件，用onShow来监听登录状态
			//当未登录时switchTab回myPlace页面再跳转到login登录，
			//这样的做法是保证login页面返回是myPlace
			if (!this.token) {
				uni.switchTab({
					url: '/pages/tabbar/myPlace/myPlace',
					success: () => {
						uni.navigateTo({
							url: '/pages/login/login/login'
						})
					}
				})
			}else{
				this.getMemberInfo()
			}
		}
	}
</script>

<style scoped>
	/*-------------本页面统一的样式-------------*/


	/*-----------以上为本页面统一的样式-----------*/
	.page {
		background-color: #f8f8f8;
	}

	.avatar-wrap {
		box-sizing: border-box;
		padding: 40rpx;
		background-color: #e4475a;
		position: relative;
	}

	.avatar {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		background-color: #ffff00;
		margin-right: 10px;
		box-shadow: 0 5px 15px -2px rgba(0, 0, 0, .8);
	}

	.avatar-img {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
	}

	.avatar-other {
		font-size: 18px;
		font-weight: bold;
		color: #ffff00;
	}

	.avatar-arrow {
		position: absolute;
		top: 50%;
		right: 40rpx;
		transform: translateY(-50%);
		font-size: 30rpx;
		color: #fffdfd;
	}

	.level {
		font-size: 15px;
		margin-top: 10px;
	}

	.asdasd {
		padding: 10px 0;
		background-color: #f8f8f8;
	}

	.order-title {
		position: relative;
	}

	.order-title-skip {
		font-size: 14px;
		font-weight: normal;
		color: #b9b9b9;
		position: absolute;
		top: 50%;
		right: 10px;
		transform: translateY(-50%);
	}

	.order-app {
		box-sizing: border-box;
		padding: 10px 0;
	}

	.order-app-item {
		width: 20vw;
		height: auto;

	}

	.order-app-item-img {
		width: 10vw;
		height: auto;
		border-radius: 3vw;
		margin-bottom: 10rpx;
	}

	.order-app-item {
		margin-left: 10vw;
	}

	.property-content {
		padding: 10px;
	}

	.property-content-withdraw-text {
		padding: 5px 10px;
		border: 2px solid #d7d7d7;
		border-radius: 2vw;
		/* box-shadow: 0 5px 15px -5px #e4475a; */
	}

	.app-content {
		align-items: baseline;
		padding: 10px 0;
		justify-content: baseline;
	}

	.app-item-wrap {
		box-sizing: border-box;
		width: 25vw;
		height: auto;
		/* calc(25vw + 30px)*/
		margin-bottom: 10rpx;
	}

	.app-img {
		width: 10vw;
		height: 10vw;
		border-radius: 3vw;
		margin-bottom: 10rpx;
	}
	
	.app-item-wrap:last-child>.app-img{
		transform: scale(.75);
	}

	.app-name {
		width: 120rpx;
		line-height: 32rpx;
	}

	.other-division-item {
		font-size: 14px;
		padding: 15px 10px;
		position: relative;
	}
</style>
